<template>
	<view>
		<view
			style="background: url(https://static-1310167831.cos.ap-nanjing.myqcloud.com/uploads/20230411/e63bcf73858e37c567847ca55821ddfa.png) no-repeat;background-size: 100%;width: 100%;height: 414rpx;">

		</view>
		<view style="width: 92%;position: absolute;top:10rpx;left: 4%;padding-bottom: 30rpx;">
			<view style="position: relative;">
				<input v-model="keywords" type="text"   class="sou" placeholder-class="suo"
					placeholder="找人/找货/搜信息" confirm-type="search" @confirm="search" />
				<image
					src="https://dyeego.oss-cn-beijing.aliyuncs.com/uploads/20220325/91243acc628efa1338d3d38826d22484.png"
					class="souicon" mode=""></image>
			</view>

			<view style="width:100%;margin: 26rpx auto;display: flex;">
				<view @click="jiage(1)" :class="tui_type==1?'tui_active':'tui_mei'" style="flex: 1;text-align: center;">
					全部
				</view>
				<view v-if="pid==72" @click="jiage(3)" :class="tui_type==3?'tui_active':'tui_mei'" style="flex: 1;text-align: center;">
					{{label3 || '出发地'}}<text class="iconfont icon-xiangxia" style="font-size: 22rpx;"></text>
				</view>
				<view v-if="pid==72" @click="jiage(4)" :class="tui_type==4?'tui_active':'tui_mei'" style="flex: 1;text-align: center;">
					{{label4 || '目的地'}}<text class="iconfont icon-xiangxia" style="font-size: 22rpx;"></text>
				</view>
				<view v-if="pid==71" @click="jiage(5)" :class="tui_type==5?'tui_active':'tui_mei'" style="flex: 1;text-align: center;">
					生产线<text class="iconfont icon-xiangxia" style="font-size: 22rpx;"></text>
				</view>
			</view>
			
			<view @click="qyxq(item.id,item.name)" v-for="(item,index) in wl_list" :key='index'>
				<view v-if="item.special_manage==2"
					style="box-sizing: border-box;padding: 30rpx 30rpx 0;background-color: #FFFFFF;margin-top: 26rpx;border-radius: 16rpx;">
					<view style="overflow: hidden;">
						<view style="width: 35%;float: left;position: relative;">
							<image :src="item.logo_image"
								style="width: 190rpx;height: 190rpx;display: block;border-radius: 10rpx;" mode="">
							</image>
						</view>
						<view style="width: 65%;float: left;padding: 6rpx 0;">
							<view style="line-height: 40rpx;color: #010101;font-size: 32rpx;margin: 10rpx 0;"
								class="yihang">
								<text
									style="background: linear-gradient(0deg, #C18C26 0%, #E1AC4E 100%);border-radius: 6rpx;color: #FEFEFE;font-size: 22rpx;padding: 0rpx 10rpx;float: left;margin-right: 10rpx;">
									认证
								</text>
								{{item.name}}
							</view>
							<!-- <view style="line-height: 30rpx;color: #999999;font-size: 22rpx;margin: 10rpx 0;" class="erhang">
								主营：{{item.main_content}}
							</view> -->
							<view style="overflow: hidden;line-height: 30rpx;margin: 10rpx 0;">
								<view style="width: 10%;float: left;">
									<image
										src="https://static-1310167831.cos.ap-nanjing.myqcloud.com/uploads/20220329/%E5%9B%BE%E5%B1%82%20564%402x.png"
										style="width: 30rpx;height: 30rpx;" mode=""></image>
								</view>
								<view style="color: #333333;font-size: 22rpx;width: 90%;float: left;">
									{{item.wl_address_text}}
								</view>
							</view>
							<view style="overflow: hidden;line-height: 30rpx;">
								<view style="width: 10%;float: left;">
									<image
										src="https://static-1310167831.cos.ap-nanjing.myqcloud.com/uploads/20220329/%E5%9B%BE%E5%B1%82%20565%402x.png"
										style="width: 30rpx;height: 30rpx;" mode=""></image>
								</view>
								<view style="color: #333333;font-size: 22rpx;width: 90%;float: left;">
									{{item.wl_main_text}}
								</view>
							</view>
						</view>
					</view>
					<view style="display: flex;text-align: center;color: #999999;font-size: 22rpx;line-height: 100rpx;">
						<view style="flex: 1;">
							浏览量：{{item.views_num}}
						</view>
						<view style="flex: 1;">
							关注数：{{item.contact_num}}人
						</view>
						<view style="flex: 1;">
							联系次数：{{item.attention_num}}次
						</view>
					</view>
				</view>
				<view v-if="item.special_manage==1" style="box-sizing: border-box;padding: 30rpx 30rpx 0;background-color: #FFFFFF;margin-top: 26rpx;border-radius: 16rpx;">
					<view style="overflow: hidden;">
						<view style="width: 35%;float: left;position: relative;">
							<image :src="item.logo_image"
								style="width: 190rpx;height: 190rpx;display: block;border-radius: 10rpx;" mode="">
							</image>
							<text
								style="color: #AF7300;font-size: 22rpx;padding: 6rpx 20rpx;background-color: #EFE0C3;position: absolute;top: 0;left: 0;border-top-left-radius: 10rpx;">
								{{item.client_position_text}}
							</text>
						</view>
						<view style="width: 65%;float: left;padding: 6rpx 0;">
							<view style="line-height: 40rpx;color: #010101;font-size: 32rpx;margin: 10rpx 0;"
								class="yihang">
								<text
									style="background: linear-gradient(0deg, #C18C26 0%, #E1AC4E 100%);border-radius: 6rpx;color: #FEFEFE;font-size: 22rpx;padding: 0rpx 10rpx;float: left;margin-right: 10rpx;">
									认证
								</text>
								{{item.name}}
							</view>
							<view
								style="line-height: 30rpx;height: 60rpx;color: #999999;font-size: 22rpx;margin: 10rpx 0;"
								class="erhang">
								主营：{{item.manage_category}}
							</view>
							<view v-if="item.city" style="line-height: 50rpx;color: #999999;font-size: 22rpx;">
								<text class="iconfont icon-dizhi2" style="color: #909193;font-size: 24rpx;"></text>
								{{item.city || ''}}-{{item.district || ''}}
							</view>
						</view>
					</view>
					<view style="display: flex;text-align: center;color: #999999;font-size: 22rpx;line-height: 100rpx;">
						<view style="flex: 1;">
							浏览量：{{item.views_num}}
						</view>
						<view style="flex: 1;">
							关注数：{{item.attention_num}}人
						</view>
						<view style="flex: 1;">
							联系次数：{{item.contact_num || 0}}次
						</view>
					</view>
				</view>
				
				<view v-if="item.special_manage==3" style="box-sizing: border-box;padding: 30rpx 30rpx 0;background-color: #FFFFFF;margin-top: 26rpx;border-radius: 16rpx;">
					<view style="overflow: hidden;">
						<view style="width: 35%;float: left;position: relative;">
							<image :src="item.logo_image"
								style="width: 190rpx;height: 190rpx;display: block;border-radius: 10rpx;" mode="">
							</image>
						</view>
						<view style="width: 65%;float: left;padding: 6rpx 0;">
							<view style="line-height: 40rpx;color: #010101;font-size: 32rpx;margin: 10rpx 0;"
								class="yihang">
								<text style="background: linear-gradient(0deg, #C18C26 0%, #E1AC4E 100%);border-radius: 6rpx;color: #FEFEFE;font-size: 22rpx;padding: 0rpx 10rpx;float: left;margin-right: 10rpx;">
									认证
								</text>
								{{item.name}}
							</view>
							<view style="line-height: 30rpx;height: 60rpx;color: #999999;font-size: 22rpx;margin: 10rpx 0;"
								class="erhang">
								生产品类：{{item.process_text || '暂无生产品类'}}
							</view>
							<view v-if="item.city" style="line-height: 50rpx;color: #999999;font-size: 22rpx;">
								<text class="iconfont icon-dizhi2" style="color: #909193;font-size: 24rpx;"></text>
								{{item.city || ''}}-{{item.district || ''}}
							</view>
						</view>
					</view>
					<view style="display: flex;text-align: center;color: #999999;font-size: 22rpx;line-height: 100rpx;">
						<view style="flex: 1;">
							浏览量：{{item.views_num}}
						</view>
						<view style="flex: 1;">
							关注数：{{item.attention_num}}人
						</view>
						<view style="flex: 1;">
							联系次数：{{item.contact_num || 0}}次
						</view>
					</view>
				</view>
				
				
				
			</view>

			<view v-if="kk" style="text-align: center;">
				<image
					src="https://static-1310167831.cos.ap-nanjing.myqcloud.com/uploads/20220329/e86889a9b8fd67d8950e4775d67316c.png"
					style="width: 400rpx;" mode="widthFix"></image>
			</view>
			<u-divider color='#717171' bg-color='#f0f2f8' height='80' border-color='#717171' text="暂无数据"
				v-if="wl_list.length<=0"></u-divider>
			<u-divider color='#717171' bg-color='#f0f2f8' height='80' border-color='#717171' text="没有更多了"
				v-if="wl_list.length>0 && enmpy"></u-divider>
		</view>

		<lb-picker ref="picker7" mode="multiSelector" :list="list_arr6" :level="2" @confirm="handleConfirm7">
		</lb-picker>

		<lb-picker ref="picker8" mode="multiSelector" :list="list_arr6" :level="2" @confirm="handleConfirm8">
		</lb-picker>
	</view>
</template>

<script>
	import LbPicker from '@/components/lb-picker'
	export default {
		components: {
			LbPicker
		},
		data() {
			return {
				keywords: '',
				page: 1,
				kk: false,
				enmpy: false,
				wl_list: [],

				list_arr6: [],
				chufa_id: '',
				mudi_id: '',
				label3: '',
				label4: '',
				tui_type: 1,
				pid:''
			}
		},
		onLoad(option) {
			console.log(option,1245)
			this.pid=option.pid
			this.keywords = option.keywords
			this.shengshi()
			this.chong()
		},
		onShow() {
			this.page = 1
			this.kk = false
			this.enmpy = false
			this.wl_list = []
			this.tj_wlqy()
		},
		onReachBottom: function() {
			if (this.enmpy) {
				return
			} else {
				this.tj_wlqy()
			}
		},
		methods: {
			chong:function(){
				this.post('api/firm_data/delete_firm_process','',true).then(res=>{
					console.log(res)
					if(res.code==1){
						
					}
				})
			},
			// 省市选择
			shengshi: function() {
				this.post('api/area/firm_area', '', true).then(res => {
					console.log(res, 147)
					if (res.code == 1) {
						for (let i = 0; i < res.data.length; i++) {
							this.list_arr6.push({
								label: res.data[i].name,
								value: res.data[i].id,
								children: []
							})
							// console.log(159)
							for (let j = 0; j < res.data[i].child.length; j++) {
								// console.log(159123)
								this.list_arr6[i].children.push({
									label: res.data[i].child[j].name,
									value: res.data[i].child[j].id
								})
							}
						}
					}
				})
				console.log(this.list_arr6, 'liuyang123')
			},
			handleConfirm7(e) {
				console.log(e)
				let value = e.value
				this.label3 = e.item.map(m => m.label).join('-')
				this.chufa_id = value[1]
				this.page = 1
				this.kk = false
				this.enmpy = false
				this.wl_list = []
				this.tj_wlqy()
			},
			handleConfirm8(e) {
				console.log(e)
				let value = e.value
				this.label4 = e.item.map(m => m.label).join('-')
				this.mudi_id = value[1]
				this.page = 1
				this.kk = false
				this.enmpy = false
				this.wl_list = []
				this.tj_wlqy()
			},
			// 推荐物流企业
			tj_wlqy: function() {
				this.post('api/firm_data/index', {
					keywords: this.keywords,
					page: this.page,
					limit: 10,
					place_address:this.chufa_id,
					des_address:this.mudi_id,
					manage_id:this.pid
				}, true).then(res => {
					console.log(res)
					if (res.code == 1) {
						if (this.page == 1) {
							if (res.data.data == null || res.data.data.length == 0) {
								this.kk = true
								this.enmpy = true
								return
							} else if (res.data.data.length < 10) {
								this.enmpy = true
							}
						} else {
							if (res.data.data == null || res.data.data.length == 0) {
								this.enmpy = true
								return
							} else if (res.data.data.length < 10) {
								this.enmpy = true
							}
						}
						this.page++
						this.wl_list.push(...res.data.data)
					} else {
						this.kk = true
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 1000
						})
					}
				})
			},
			qyxq: function(id,name) {
				uni.navigateTo({
					url: 'wl_qyxq?id=' + id+'&name='+name
				})
			},
			search: function() {
				this.page = 1
				this.kk = false
				this.enmpy = false
				this.wl_list = []
				this.tj_wlqy()
			},

			jiage: function(index) {
				this.tui_type = index
				if (index == 3) {
					this.$refs['picker7'].show()
				} else if (index == 4) {
					this.$refs['picker8'].show()
				} else if (index == 1) {
					this.label3 = ''
					this.label4 = ''
					this.chufa_id = ''
					this.mudi_id = ''
					this.page = 1
					this.kk = false
					this.enmpy = false
					this.wl_list = []
					this.chong()
					this.tj_wlqy()
				}else if(index==5){
					uni.navigateTo({
						url:'../../../sub/pages/jiagong/scx'
					})
				}
			},

		}
	}
</script>

<style lang="scss">
	.tui_mei {
		color: #333333;
		font-size: 28rpx;
		font-weight: 500;
	}

	.tui_active {
		color: #000000;
		font-size: 28rpx;
		font-weight: 600;
	}

	page {
		background-color: #F8F8F8 !important;
		font-family: Demibold;
	}

	.sou {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		color: #FFFFFF;
		font-size: 26rpx;
		box-sizing: border-box;
		padding: 0 30rpx 0 80rpx;
		background-color: rgba(255, 255, 255, .3);
	}

	.suo {
		color: #FFFFFF;
		opacity: 1;
		font-size: 26rpx;
	}

	.souicon {
		width: 30rpx;
		height: 30rpx;
		position: absolute;
		top: 50%;
		left: 30rpx;
		transform: translateY(-50%);

	}
</style>
